@keyframes myfirst {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20%);
  }
  100% {
    transform: translateY(0);
  }
}

.body {
  position: relative;
}

.bg-ellipse-full-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5000px;
  overflow: hidden;
  z-index: -1;
  background: linear-gradient(98.63deg, rgba(248, 249, 251, 0.546) 20.59%, rgba(120, 230, 220, 0) 89.33%);
}

.bg-ellipse-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: -1;
}

.bg-ellipse {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 51%;
  z-index: -1;
  -webkit-transition: -webkit-transform 0.3s linear;
  -webkit-transition: transform 0.3s linear;
  transition: transform 0.3s linear;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}

.bg-ellipse-wrapper .bg-ellipse-1 {
  right: -200px;
  top: 230px;
  background: linear-gradient(44.11deg, rgba(139, 233, 223, 0.75) 8.94%, rgba(255, 255, 255, 0) 86.73%);
  -webkit-transform: rotate(-85.35deg);
  -ms-transform: rotate(-85.35deg);
  transform: rotate(-85.35deg);
}

.bg-ellipse-wrapper .bg-ellipse-2 {
  left: -200px;
  top: 420px;
  background: linear-gradient(44.11deg, rgba(124, 177, 235, 0.6) 8.94%, rgba(255, 255, 255, 0) 86.73%);
  -webkit-transform: rotate(-21.57deg);
  -ms-transform: rotate(-21.57deg);
  transform: rotate(-21.57deg);
}

.bg-ellipse-wrapper .bg-ellipse-3 {
  right: -200px;
  top: 1000px;
  background: linear-gradient(44.11deg, rgba(245, 198, 39, 0.6) 8.94%, rgba(255, 255, 255, 0) 86.73%);
  -webkit-transform: scale(0.85) rotate(-63.95deg);
  -ms-transform: scale(0.85) rotate(-63.95deg);
  transform: scale(0.85) rotate(-63.95deg);
}

.bg-ellipse-wrapper .bg-ellipse-4 {
  left: -200px;
  top: 1500px;
  background: linear-gradient(44.11deg, rgba(139, 233, 223, 0.75) 8.94%, rgba(255, 255, 255, 0) 86.73%);
  -webkit-transform: rotate(-29.1deg);
  -ms-transform: rotate(-29.1deg);
  transform: rotate(-29.1deg);
}

.bg-ellipse-wrapper .bg-ellipse-5 {
  right: -200px;
  top: 2300px;
  background: linear-gradient(44.11deg, rgba(124, 177, 235, 0.6) 8.94%, rgba(255, 255, 255, 0) 86.73%);
  -webkit-transform: rotate(-70.95deg);
  -ms-transform: rotate(-70.95deg);
  transform: rotate(-70.95deg);
}

.bg-ellipse-wrapper .bg-ellipse-6 {
  left: -200px;
  top: 2850px;
  background: linear-gradient(44.11deg, rgba(245, 198, 39, 0.6) 8.94%, rgba(255, 255, 255, 0) 86.73%);
  -webkit-transform: scale(0.95) rotate(-21.57deg);
  -ms-transform: scale(0.95) rotate(-21.57deg);
  transform: scale(0.95) rotate(-21.57deg);
}

.bg-ellipse-wrapper .bg-ellipse-7 {
  right: -200px;
  top: 2200px;
  background: linear-gradient(44.11deg, rgba(139, 233, 223, 0.75) 8.94%, rgba(255, 255, 255, 0) 86.73%);
  -webkit-transform: scale(0.85) rotate(-93.95deg);
  -ms-transform: scale(0.85) rotate(-93.95deg);
  transform: scale(0.85) rotate(-93.95deg);
}

.bg-ellipse-wrapper .bg-ellipse-8 {
  left: -200px;
  top: 2500px;
  background: linear-gradient(44.11deg, rgba(124, 177, 235, 0.6) 8.94%, rgba(255, 255, 255, 0) 86.73%);
  -webkit-transform: rotate(-21.95deg);
  -ms-transform: rotate(-21.95deg);
  transform: rotate(-21.95deg);
}

.wrap {
  position: relative;
}

.wrap .head-con {
  height: 60px;
  margin: 0 auto;
  font-weight: 200;
  font-size: 14px;
  color: #ffffff;
  z-index: 8;
}

.wrap .head-con .logo {
  width: 130px;
  height: 70px;
  line-height: 70px;
  float: left;
}

.wrap .head-con .logo a {
  color: #ffffff;
  float: left;
  font-family: Gilroy Semi Bold, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

.wrap .head-con img {
  width: 50px;
  height: 50px;
  margin-top: 10px;
  margin-right: 8px;
  float: left;
  vertical-align: middle;
}

.wrap .head-nav {
  width: 560px;
  height: 70px;
  line-height: 70px;
  float: right;
}

.wrap .head-nav ul {
  height: 70px;
  width: 100%;
}

.wrap .head-nav ul li {
  float: left;
  margin-right: 42px;
  height: 100%;
  line-height: 50px;
}

.wrap .head-nav ul li a {
  font-weight: 200;
  color: #ffffff;
  padding-bottom: 10px;
  box-sizing: border-box;
  line-height: 65px;
  font-family: Gilroy Semi Bold, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

.wrap .head-nav ul li a:hover {
  opacity: 0.5;
  border-bottom: 2px solid #ffffff;
}

.wrap .main-video {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 940px;
  overflow: hidden;
}

.wrap .main-video video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.wrap .main-video .main-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 12;
  font-family: Gilroy Semi Bold, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-size: 54px;
  line-height: 61px;
  color: #fff;
}

.wrap .main-video .main-txt h3 {
  width: 100%;
  height: 81px;
  font-size: 54px;
  color: #ffffff;
}

.wrap .main-video .main-txt p {
  position: relative;
  margin-left: 67px;
  width: 92%;
  height: 17px;
  color: #ffffff;
  letter-spacing: 25px;
  text-indent: 23px;
  font-size: 14px;
  line-height: 17px;
  opacity: 0.8;
  margin-top: 14px;
}

.wrap .main-video .main-txt p::before {
  content: "";
  display: block;
  width: 74px;
  height: 2px;
  position: absolute;
  top: calc(50% - 0px);
  left: -81px;
  background-image: linear-gradient(270deg, rgba(255, 255, 255, 0), #fff 47%, rgba(255, 255, 255, 0));
}

.wrap .main-video .main-txt p::after {
  content: "";
  display: block;
  width: 74px;
  height: 2px;
  position: absolute;
  top: calc(50% - 1px);
  right: 0px;
  background-image: linear-gradient(270deg, rgba(255, 255, 255, 0), #fff 47%, rgba(255, 255, 255, 0));
}

.wrap .main-video .arrows {
  position: absolute;
  top: 90%;
  left: 50%;
  width: 50px;
  height: 50px;
}

.wrap .main-video .arrows a {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 1px solid #ffff;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -16px;
  margin-left: 16px;
}

.wrap .main-video .arrows a img {
  position: absolute;
  top: 4px;
  left: 6px;
  width: 20px;
  height: 20px;
  animation: myfirst 1.1s linear infinite;
}

.wrap .main-video .arrows a::after {
  content: "";
  display: block;
  position: relative;
  height: 28px;
  border-left: 1px dashed #fff;
  left: 17px;
  top: 45px;
}

.wrap .main-top {
  width: 100%;
  height: 816px;
  margin-top: 1000px;
  background-color: #ccc;
}

.wrap .main-top .maintop-left {
  width: 445px;
  height: 642px;
  float: left;
}

.wrap .main-top .maintop-left h3 {
  width: 192px;
  height: 56px;
  color: #333333;
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 68px;
}

.wrap .main-top .maintop-left p {
  font-size: 22px;
  color: #333333;
  line-height: 1.5;
}

.wrap .main-top .maintop-right {
  float: right;
  width: 912px;
  height: 815px;
  background-color: blanchedalmond;
}
